<template>
  <div>
    <!-- <Hom> -->
      <div class="box">
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品促销"></el-step>
          <el-step title="填写商品属性"></el-step>
          <el-step title="选择商品关联"></el-step>
        </el-steps>
        <!-- 商品信息 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          v-if="active == 0"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品分类" prop="sty">
            <el-select v-model="ruleForm.sty" placeholder="商品分类">
              <el-option label="服装" value="shanghai"></el-option>
              <el-option label="数码" value="beijing"></el-option>
              <el-option label="家用电器" value="ji"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="副标题" prop="names">
            <el-input v-model="ruleForm.names"></el-input>
          </el-form-item>
          <el-form-item label="商品品牌" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择品牌">
              <el-option label="三星" value="三星"></el-option>
              <el-option label="华为" value="华为"></el-option>
              <el-option label="小米" value="小米"></el-option>
              <el-option label="苹果" value="苹果"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品介绍" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="商品货号" prop="date1">
            <el-input v-model="ruleForm.date11"></el-input>
          </el-form-item>
          <el-form-item label="商品售价" prop="date1">
            <el-input v-model="ruleForm.date11"></el-input>
          </el-form-item>
          <el-form-item label="市场价" prop="date1">
            <el-input v-model="ruleForm.date11"></el-input>
          </el-form-item>
          <el-form-item label="商品库存" prop="date1">
            <el-input v-model="ruleForm.date11"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              下一步，填写商品促销
            </el-button>
          </el-form-item>
        </el-form>
        <el-form ref="ruleForm" v-if="active == 1" label-width="100px" class="demo-ruleForm">
          <el-form-item label="赠送积分">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="赠送成长值">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品货号">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="预告商品">
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="上架">
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="活动性质">
            <el-checkbox-group>
              <el-checkbox label="无忧退款" name="type"></el-checkbox>
              <el-checkbox label="快速退款" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="详细页标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="详细页描述">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品关键字">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品备注">
            <el-input type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="fan()">
              上一步，填写商品信息
            </el-button>
            <el-button type="primary" @click="xia()">
              下一步，填写商品促销
            </el-button>
          </el-form-item>
        </el-form>
        <el-form ref="ruleForm" v-if="active == 2" label-width="100px" class="demo-ruleForm" >
          <el-form-item label="属性类型">
            <el-select placeholder="商品分类">
              <el-option label="服装" value="shanghai"></el-option>
              <el-option label="数码" value="beijing"></el-option>
              <el-option label="家用电器" value="ji"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :disabled="true" label="商品规格">
            <el-input></el-input>
          </el-form-item>
          <el-form-item :disabled="true" label="商品参数">
            <el-input></el-input>
          </el-form-item>

         <el-form-item label="商品相册">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog >
              <img width="100%"  alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="规格参数">
            <el-input type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="fan()">
              上一步，填写商品促销
            </el-button>
            <el-button type="primary" @click="xia()">
              下一步，选择商品关联
            </el-button>
          </el-form-item>
        </el-form>
         <el-form ref="ruleForm" v-if="active == 3" label-width="100px" class="demo-ruleForm" >      
          <el-form-item label='关联专题'>
            <el-transfer
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入专题名称"
              v-model="value"
              :titles="['待选择', '以选择']"
              :data="data">
            </el-transfer>
          </el-form-item>
          <el-form-item style='text-align:center'>
            <el-button @click="fan()">
              上一步，填写商品属性
            </el-button>
            <el-button style='marginLeft:20px' type="primary" @click="xia()">
              完成，提交商品
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    <!-- </Hom> -->
  </div>
</template>
<script>
export default {
  // components: {
  //   Hom: require('./../layout/Layout.vue').default,
  // },
  data() {
      const generateData = _ => {
        const data = [];
        const cities = ['夏季精选', '品牌手机降价', '晓龙845新品上市'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
    return {
       data: generateData(),
        value: [1],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        },
      active: 0,
      ruleForm: {
        sty: '',
        name: '123',
        names: '',
        region: '三星',
        desc: '',
        date1: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    fan() {
      this.active -= 1
    },
    xia() {
      this.active += 1
      if(this.active==4){
        this.active -= 1
        this.$confirm('是否提交该产品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });          
        });
      }
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.active += 1
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 728px;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 20px 30px;
}
  

.el-form {
  width: 100%;
  margin-top: 40px;
  text-align: left;
}
.el-button+.el-button{
  margin-left:0;
}
.el-transfer__buttons {
    text-align: left;
    width: 60px;
    }
</style>
